<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./data.js"></script>
    <script src="./jq-3.6.0.js"></script>
    <style>
        .main {
            display: flex;
            height: 200px;
        }
        
        .menu {
            flex: 1;
            background-color: red;
        }
        
        .goods {
            flex: 2;
            overflow: auto;
            background-color: green;
        }
        
        .menu>.item {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        
        .goods>.item {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: green;
        }
        
        .one {
            background-color: pink !important;
        }
        
        img {
            height: 10px;
            width: 10px;
        }
        /* .a1 {
            color: aliceblue;
        } */
    </style>
</head>

<body style="margin: 0px;">
    <div class="main">
        <div class="menu"></div>
        <div class="goods"></div>


    </div>
</body>
<script>
    $(function() {
        createMenu(menuList);
        createMenuTitle()
    })

    function createMenu(data) {
        $.each(data, function(i, e) {
            var div = $(`<div class="item"></div>`)
            if (e.img) {
                var imgDiv = $(`<img src=""/>`);
                imgDiv.prop('src', e.img);
                div.append(imgDiv);
            }
            var divname = $(`<span class="name"></span>`)
            divname.html(e.name)
            div.append(divname);
            var n1 = 'data-name'
            div.attr(n1, '.a' + e.id)
            div.on('click', function(i, e) {
                var name = $(this).attr('data-name');
                pull(name);
            })
            $('.menu').append(div);
        })
    }


    function createGoods() {
        return new Promise((resolve, reject) => {
            $.each(goodsList, function(i, e) {
                var div = $('<div class="item"></div>')
                div.html(e.name);
                div.addClass('a' + e.menuId)
                $('.goods').append(div);
            });
            resolve();
        });
    }
    async function createMenuTitle() {
        await createGoods();
        $.each(menuList, function(i, e) {
            var div = $('<div class="item one"></div>')
            div.html(e.name);
            div.addClass('a' + e.id);
            $('.a' + e.id).first().before(div)
        })
    }

    function pull(name) {
        var pageTop = $(name).first().offset().top;
        console.log('获取当前元素到页面中的距离:' + pageTop);
        $('.goods').scrollTop(pageTop + $('.goods').scrollTop())
    }
</script>

</html>